<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/* 集合实际情况写个统配 */
			*{
				font: 16px "微软雅黑";
				/* 去掉内外边距 */
				margin: 0;
				padding: 0;
				/* 无序列表：有样式---“去一个样式：列表项” */
				list-style-type: none;
				/* 无序列表：有样式---【理解：简写】
				去全部样式：list-style-tyle 去列表项样式
				           list-style-position去列表项标记位置样式
						   list-sytyle-image去列表项图片标记样式
				*/
			  
				list-style: none;
				
			}
			/* 左栏效果
			1.左栏空间区域【aside】：235*450   背景颜色
			2.左栏区内容【li】  加权 235*50   相对定位--挂靠点【固定位置】
			3.给每一个区域内容【li】加鼠标移动上去改背景颜色
			4.左栏弹出框：400*450  1px边框 绝对定位-微调
			*/
			aside{
				width: 235px;
				height: 450px;
				background: #ababab;
				margin: 20px 50px;
			}
			 aside ul.sidebar li{
				width: 235px;
				height: 50px;
				position: relative;
				text-align: center;
				line-height: 50px;
			}
			aside ul.sidebar li:hover{
				background: #ffffff;
			}
			aside ul.sidebar div.out{
				width: 400px;
				height: 450px;
				border: 1px solid red;
				position: absolute;
				left: 285px;
				/* 显示与隐藏：JavaScript【JQuery框架】 */
				display: none;
			}
		</style>
		 <script src="jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- html结构：结构化标记【语义化标签】  
		    aside元素 针对：左栏、广告、弹出效果... 有利于SEO优化
			之前版本通过div+id起名方式【缺点：繁琐、定义起名、冗余】
		-->
		<aside>
			<ul class="sidebar">
				<!-- 弹出框结构 -->
				<div class="out"></div>
				<li>手机 <span>></span></li>
				<li>电脑 <span>></span></li>
				<li>家具 </li>
				<li>男装</li>
				<li>女装</li>
				<li>美妆</li>
				<li>房产</li>
				<li>女婴</li>
				<li>食品</li>
			</ul>
		</aside>
		<script>
		// 左栏弹出效果与隐藏 .hover事件源+css函数
		// 选择器:li
		$("aside ul.sidebar li").hover(function(){
			/* 弹出框默认：隐藏---hover悬停第一件事：显示 */
			$('aside ul.sidebar div.out').css("display","block");
			},function(){
			$('aside ul.sidebar div.out').css("display","none");	
			});
		</script>
	</body>
</html>

<!-- 事件源  .hover()       切换效果与css悬停hover一致 
                            语法：.hover(function(){},function(){})
-->